<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/lyBaseCss.css">
    <link rel="stylesheet" href="css/lyJiaoyi.css">
    <script src="js/jquery-1.12.3.min.js"></script>
    <script src="js/echarts.min.js"></script>
    <script src="js/echarts-wordcloud.js"></script>
    <script src="js/china.js"></script>
    <script src="js/henan.js"></script>
</head>

<body>
    <div class="contain">
        <div class="header"></div>
        <div class="main">
            <div class="m_l">
                <div class="m_l_t">
                    <div class="m_l_t_l">
                        <div id="lbxl" class="m_l_t_l_t"></div>
                        <div id="ppxl_top5" class="m_l_t_l_b"></div>
                    </div>
                    <div class="m_l_t_r">
                        <div class="m_l_t_r_t">
                            <div class="xiaoliang">
                                <p style="width:60%">
                                    <span style="color:#ff0;font-size:20px;">销量</span>
                                    <br>
                                    <span style="font-size:20px;color:#e8e8e8;line-height:160%">5644</span>
                                </p>
                                <p style="width:15%; margin-top:16px;">
                                    <span style="color:#ff0;font-size:16px;">同比</span>
                                    <br>
                                    <span style="font-size:16px;color:#e8e8e8;line-height:200%">65%</span>
                                </p>
                                <p style="width:15%; margin-top:16px">
                                    <span style="color:#ff0;font-size:16px;">环比</span>
                                    <br>
                                    <span style="font-size:16px;color:#e8e8e8;line-height:200%">25%</span>
                                </p>
                            </div>
                            <span class="line"></span>
                            <div class="xiaoe">
                                <p style="width:60%">
                                    <span style="color:#ff0;font-size:20px;">销额</span>
                                    <br>
                                    <span style="font-size:20px;color:#e8e8e8;line-height:160%">&yen;65200</span>
                                </p>
                                <p style="width:15%; margin-top:16px">
                                    <span style="color:#ff0;font-size:16px;">同比</span>
                                    <br>
                                    <span style="font-size:16px;color:#e8e8e8;line-height:200%">25%</span>
                                </p>
                                <p style="width:15%; margin-top:16px">
                                    <span style="color:#ff0;font-size:16px;">环比</span>
                                    <br>
                                    <span style="font-size:16px;color:#e8e8e8;line-height:200%">42%</span>
                                </p>
                            </div>
                        </div>
                        <div id="henanMap" class="m_l_t_r_b"></div>
                    </div>
                </div>
                <div class="m_l_b">
                    <div id="xsqsjtbhb" class="m_l_b_l"></div>
                    <div id="xeqsjtbhb" class="m_l_b_r"></div>
                </div>
            </div>
            <div class="m_r">
                <div id="lbxe" class="m_r_t"></div>
                <div id="ppxezfyt" class="m_r_b"></div>
            </div>
        </div>
    </div>
</body>
<script>
//品牌销额字符云图
$(function() {
    var myChart = echarts.init(document.getElementById('ppxezfyt'));
    var option = {
        title: {
            text: '品牌销额字符云图',
            link: 'https://www.baidu.com/s?wd=' + encodeURIComponent('ECharts'),
            x: 'center',
            textStyle: {
                fontSize: 16,
                color: '#ff0'
            }
        },
        tooltip: {
            show: true
        },
        toolbox: {
            show: false,
            feature: {
                saveAsImage: {
                    iconStyle: {
                        normal: {
                            color: '#FFFFFF'
                        }
                    }
                }
            }
        },
        series: [{
            name: '热点分析',
            type: 'wordCloud',
            //size: ['9%', '99%'],
            sizeRange: [12, 66],
            textRotation: [0, 45, 90, -45],
            rotationRange: [-90, 90],
            shape: 'circle',
            // shape: 'pentagon', 
            textPadding: 0,
            maskImage: "",
            autoSize: {
                enable: true,
                minSize: 6
            },
            textStyle: {
                normal: {
                    color: function() {
                        var colors = ['#E57728', '#53C6F6', '#6FAC45', "#304184", "#59A595", '#216321', '#735ba1', '#bda29a', '#6e7074', '#546570', '#c4ccd3'];
                        return colors[parseInt(Math.random() * 10)];
                    }
                },
                emphasis: {
                    shadowBlur: 10,
                    shadowColor: '#333'
                }
            },
            data: [{
                name: "asd",
                value: 666
            }, {
                name: "asd",
                value: 520
            }]
        }]
    };

    var JosnList = [];

    JosnList.push({
        name: "周氏米醋",
        value: 400
    }, {
        name: "郑州黄河鲫鱼",
        value: 200
    }, {
        name: "水果大礼包",
        value: "500"
    }, {
        name: "菌菇大礼包",
        value: "500"
    }, {
        name: "固始愣头青萝卜",
        value: "230"
    }, {
        name: "三粉大礼包",
        value: "500"
    }, {
        name: "米面油大礼包",
        value: "400"
    }, {
        name: "信阳毛尖",
        value: "300"
    }, {
        name: "手工红薯粉条",
        value: "300"
    }, {
        name: "铁棍山药",
        value: "300"
    }, {
        name: "小黄姜",
        value: "230"
    }, {
        name: "红富士苹果",
        value: "300"
    }, {
        name: "月季花",
        value: "300"
    }, {
        name: "黑毛猪闷罐肉",
        value: "406"
    }, {
        name: "芝麻香油",
        value: "300"
    }, {
        name: "赣南脐橙",
        value: "234"
    }, {
        name: "富源薄皮核桃",
        value: "269"
    }, {
        name: "黄金梨",
        value: "375"
    }, {
        name: "新密尖山金银花",
        value: "355"
    }, {
        name: "嵩县银杏",
        value: "355"
    }, {
        name: "好想你红枣",
        value: "335"
    }, {
        name: "太行胎菊",
        value: "324"
    }, {
        name: "薄荷红茶",
        value: "304"
    }, {
        name: "固始笨鸡蛋",
        value: "304"
    }, {
        name: "包公花生油",
        value: "284"
    }, {
        name: "许沟缠丝鸡蛋",
        value: "284"
    });

    option.series[0].data = JosnList;

    myChart.setOption(option);
    $("#ppxezfyt").hover(function() {
        myChart.setOption(option);

    })
});
//品牌销量TOP5
$(function() {
    var myChart = echarts.init(document.getElementById('ppxl_top5'));
    option = {
        title: {
            text: '品牌销量TOP5',
            textStyle: {
                color: '#ff0',
                align: 'center',
                fontWeight: 'normal'
            },
            left: 'center',
            top: '3%'
        },
        color: ['#00bbc7'],
        grid: {
            left: '15%',
            right: '15%',
            bottom: '5%',
            top: '25%',
            containLabel: true
        },
        tooltip: {},
        xAxis: {
            type: 'category',
            data: ['周氏米醋', '益生元', '光辉', '马克', '农信粉条'],
            axisLabel: {
                show: true,
                color: '#e8e8e8',
            },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: false
            }
        },
        yAxis: {
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            splitLine: {
                show: false,
            },
            axisLabel: {
                show: false
            }
        },
        series: [{
            type: 'bar',
            barWidth: '50%',
            data: [500, 480, 460, 430, 400],
            itemStyle: {
                barBorderRadius: 4,
            }
        }]
    };
    myChart.setOption(option);
})
//类别销量
$(function() {
    var myChart = echarts.init(document.getElementById('lbxl'));
    var colorList = ['#e43f51', '#f2aa3d', '#a3ca56', '#43d375', '#2c95df'];

    var data = [{ name: '红薯', value: 522 }, { name: '纯正花生油', value: 500 }, { name: '葡萄酒', value: 438 }, { name: '中鹤饺子粉', value: 410 }, { name: '手工挂面', value: 389 }, ];
    var yAxisData = new Array();
    var seriesData = new Array();
    for (var i = 0; i < data.length; i++) {
        yAxisData.push(data[i].name);
        seriesData.push({
            value: data[data.length - i - 1].value,
            itemStyle: {
                barBorderRadius: 8,
                color: colorList[i],
            },
            label: {
                show: true,
                color: colorList[i],
                position: 'right',
                fontSize: 16,
                formatter: function(params) {
                    var val = params.value;
                    return val;
                }
            }
        });
    }
    yAxisData.reverse();
    var option = {
        title: {
            text: '类别销量',
            textStyle: {
                color: '#ff0',
                align: 'center',
                fontWeight: 'normal'
            },
            left: 'center',
            top: '3%'
        },

        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            show: false
        },
        grid: {
            left: '3%',
            right: '10%',
            bottom: '10%',
            top: '20%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: false
            },
            splitLine: {
                show: false,
            }
        },
        yAxis: {
            type: 'category',
            data: yAxisData,
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                color: '#e8e8e8',
                fontSize: 16
            }
        },
        series: [{
            type: 'bar',
            data: seriesData

        }]
    };


    myChart.setOption(option);
})
//类别销额
$(function() {
    var myChart = echarts.init(document.getElementById('lbxe'));
    var colorList = ['#e43f51', '#f2aa3d', '#a3ca56', '#43d375', '#2c95df'];

    var data = [{ name: '红薯', value: 11600 }, { name: '纯正花生油', value: 15600 }, { name: '葡萄酒', value: 10009 }, { name: '中鹤饺子粉', value: 8600 }, { name: '手工挂面', value: 7400 }, ];
    var yAxisData = new Array();
    var seriesData = new Array();
    for (var i = 0; i < data.length; i++) {
        yAxisData.push(data[i].name);
        seriesData.push({
            value: data[data.length - i - 1].value,
            itemStyle: {
                barBorderRadius: 8,
                color: colorList[i],
            },
            label: {
                show: true,
                color: colorList[i],
                position: 'right',
                fontSize: 16,
                formatter: function(params) {
                    var val = params.value;
                    return val;
                }
            }
        });
    }
    yAxisData.reverse();
    var option = {
        title: {
            text: '类别销额',
            textStyle: {
                color: '#ff0',
                align: 'center',
                fontWeight: 'normal'
            },
            left: 'center',
            top: '3%'
        },

        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            show: false
        },
        grid: {
            left: '3%',
            right: '10%',
            bottom: '10%',
            top: '20%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: false
            },
            splitLine: {
                show: false,
            }
        },
        yAxis: {
            type: 'category',
            data: yAxisData,
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                color: '#e8e8e8',
                fontSize: 16
            }
        },
        series: [{
            type: 'bar',
            data: seriesData

        }]
    };


    myChart.setOption(option);
})
//销额趋势及同比环比
$(function() {

    option = {
        title: {
            text: '销额趋势及同比环比',
            textStyle: {
                color: '#eec900' //标题颜色
            }
        },
        grid: {
            left: '3%',
            right: '5%',
            bottom: '3%',
            containLabel: true
        },
        tooltip: {
            trigger: 'axis',
        },
        toolbox: {
            show: false,
            feature: {
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        legend: {
            show: false,
            data: ['销量', '销量环比', '销量同比']
        },
        xAxis: [{
            splitLine: { show: false }, //去除网格线
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisPointer: {
                type: 'shadow'
            },
            axisLine: {
                lineStyle: {
                    color: '#e8e8e8'
                }
            },
            axisTick: {
                color: '#e8e8e8'
            },
            axisLabel: {
                color: '#e8e8e8'
            },
            splitLine: {
                color: '#e8e8e8',
            }
        }],
        yAxis: [{
                splitLine: { show: false }, //去除网格线
                type: 'value',
                name: '销额',
                min: 0,
                max: 300,
                interval: 50,
                axisLabel: {
                    formatter: '{value}万 ',
                    color: '#e8e8e8',
                },
                axisLine: {
                    lineStyle: {
                        color: '#e8e8e8'
                    }
                },
                axisTick: {
                    color: '#e8e8e8',
                },
            },
            {
                splitLine: { show: false }, //去除网格线
                type: 'value',
                name: '比例',
                min: -40,
                max: 50,
                interval: 10,
                axisLabel: {
                    formatter: '{value}% '
                },
                axisLine: {
                    lineStyle: {
                        color: '#e8e8e8'
                    }
                },
                axisTick: {
                    color: '#e8e8e8'
                },
                axisLabel: {
                    color: '#e8e8e8'
                },
            }
        ],
        series: [

            {
                name: '销额',
                type: 'bar',
                itemStyle: {
                    normal: {
                        color: '#009acd' //圆柱颜色
                    }
                },
                data: [243.7, 209.0, 188.1, 237.6, 253.2, 268.3, 203.6, 228.2, 275.9, 193.3, 281.8, 210.9]
            },
            {
                name: '销量环比',
                type: 'line',
                yAxisIndex: 1,
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#cd3333' //折线和折点颜色
                    }
                },
                data: [28.9, -14.2, -10, 26.3, 6.6, 6.0, -24.1, 12.1, 20.9, -29.9, 45.8, -25.2]
            },
            {
                name: '销量同比',
                type: 'line',
                yAxisIndex: 1,
                itemStyle: {
                    normal: {
                        color: '#eec900' //折线和折点颜色
                    }
                },
                data: [-2.0, 2.2, 1.3, 12.5, 4.3, -0.2, 22.3, 19.4, 15.0, -9.5, 13.0, 7.2]
            }
        ]
    };
    var myChart = echarts.init(document.getElementById('xeqsjtbhb'));
    myChart.setOption(option);
})
//销量趋势及同比环比
$(function() {
    option = {
        title: {
            text: '销量趋势及同比环比',
            textStyle: {
                color: '#eec900' //标题颜色
            }
        },
        grid: {
            left: '3%',
            right: '5%',
            bottom: '3%',
            containLabel: true
        },
        tooltip: {
            trigger: 'axis',

        },
        toolbox: {
            show: false,
            feature: {
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        legend: {
            show: false,
            data: ['销量', '销量环比', '销量同比']
        },
        xAxis: [{
            splitLine: { show: false }, //去除网格线
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisPointer: {
                type: 'shadow'
            },
            axisLine: {
                lineStyle: {
                    color: '#e8e8e8'
                }
            },
            axisTick: {
                color: '#e8e8e8'
            },
            axisLabel: {
                color: '#e8e8e8'
            },
            splitLine: {
                color: '#e8e8e8',
            }
        }],
        yAxis: [{
                splitLine: { show: false }, //去除网格线
                type: 'value',
                name: '销量',
                min: 0,
                max: 1400,
                interval: 200,
                axisLabel: {
                    formatter: '{value} '
                },
                axisLine: {
                    lineStyle: {
                        color: '#e8e8e8'
                    }
                },
                axisTick: {
                    color: '#e8e8e8'
                },
                axisLabel: {
                    color: '#e8e8e8'
                },

            },
            {
                splitLine: { show: false }, //去除网格线
                type: 'value',
                name: '比例',
                min: -40,
                max: 50,
                interval: 10,
                axisLabel: {
                    formatter: '{value}% '
                },
                axisLine: {
                    lineStyle: {
                        color: '#e8e8e8'
                    }
                },
                axisTick: {
                    color: '#e8e8e8'
                },
                axisLabel: {
                    color: '#e8e8e8'
                },
            }
        ],
        series: [

            {
                name: '销量',
                type: 'bar',
                itemStyle: {
                    normal: {
                        color: '#009acd' //圆柱颜色
                    }
                },
                data: [1047, 790, 620, 930, 1144, 1208, 883, 1072, 1235, 863, 1282, 980]
            },
            {
                name: '销量环比',
                type: 'line',
                yAxisIndex: 1,
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#cd3333' //折线和折点颜色
                    }
                },
                data: [23.2, -24.5, -8.9, 26.4, 23.0, 5.6, -26.9, 21.4, 15.2, -30.1, 48.5, -23.6]
            },
            {
                name: '销量同比',
                type: 'line',
                yAxisIndex: 1,
                itemStyle: {
                    normal: {
                        color: '#eec900' //折线和折点颜色
                    }
                },
                data: [-2.0, 2.2, 3.3, 14.5, 6.3, -1.2, 20.3, 23.4, 13.0, -8.5, 12.0, 6.2]
            }
        ]
    };
    var myChart = echarts.init(document.getElementById('xsqsjtbhb'));
    myChart.setOption(option);
})
//河南销售分布
$(function() {
    var echart = echarts.init(document.getElementById('henanMap'))
    var option = {
        title: {
            text: '河南销售分布',
            textStyle: {
                color: '#e8e8e8',
            }


        },
        legend: {
            data: ['河南省'],
            show: false,
        },
        color: ["blue"],
        tooltip: {
            show: false
        },
        //toolbox:{},
        visualMap: [{
            min: 0,
            max: 2000,
            show: false,
            inRange: {
                color: ["#70AD46", "#5E9BD1", "#ED7C30"],
                opacity: 0
            },
            outOfRange: {

            }
        }],
        series: [{
            name: '河南省',
            type: 'map',
            mapType: '河南省',
            top: -0.01,
            label: {
                normal: {
                    show: false,
                    color: "red"
                }
            },
            data: [
                { name: '郑州市', value: 100 },
                { name: '开封市', value: 1000 },
                { name: '许昌市', value: 100 },
                { name: '鹤壁市', value: 100 },
                { name: '新乡市', value: 1000 },
                { name: '平顶山市', value: 1000 },
                { name: '焦作市', value: 1000 },
                { name: '洛阳市', value: 100 },
                { name: '南阳市', value: 2000 },
                { name: '周口市', value: 2000 },
                { name: '驻马店', value: 100 },
                { name: '商丘市', value: 2000 },
                { name: '漯河市', value: 1000 },
                { name: '驻马店市', value: 1000 },
            ],
            itemStyle: {
                normal: {
                    areaColor: '#fff'
                }
            }
        }]
    }
    echart.setOption(option);




    /*var obj = {
        "郑州市": "zhengzhoushi",
        "安阳市": "anyangshi",
        "洛阳市": "luoyangshi",
        "开封市": "kaifengshi",
        "平顶山市": "pingdingshan",
        "鹤壁市": "hebishi",
        "新乡市": "xinxiangshi",
        "焦作市": "jiaozuoshi",
        "濮阳市": "puyangshi",
        "许昌市": "xuchangshi",
        "漯河市": "luoheshi",
        "三门峡市": "sanmenxiashi",
        "南阳市": "nanyangshi",
        "商丘市": "shangqiushi",
        "信阳市": "xinyangshi",
        "周口市": "zhoukoushi",
        "驻马店市": "zhumadianshi",
        "济源市": "jiyuanshi"
    }

    var echart2 = echarts.init(document.getElementById("show2"));

    echart.on("click",function(e){
            var url ="/henan/"+obj[e.name]+".json";
            $.get(url,{},function(msg){
                echarts.registerMap(obj[e.name], msg);
                var div = $("<div id='show2'></div>");
                div.css({
                    height:"600px",
                    width:"600px",
                })  
                $("#show").after(div);
                var chart = echarts.init(div[0]);
                div.css({
                    position:"absolute",
                    top:"20px",
                    left:0
                })
                $("#show").hide();
                chart.setOption({
                    series: [{
                        type: 'map',
                        map: obj[e.name],
                        label:{
                            normal:{
                                show:true
                            }
                        }
                    }]
                });
                chart.on("click",function(e){
                    console.log(this)
                    console.log(e)
                })
            },"json")
        })

        $("#close").click(function(){
            $("#show2").hide();
            $("#show").show();
            $("#show2").remove();
        })*/
    //  echart.on("click",function(e){
    //    $.ajax({
    //          url:"/河南/平顶山.json",
    //          data:{},
    //          type:"get",
    //          contentType: "application/x-www-form-urlencoded; charset=utf-8",
    //          success:function(msg){
    //              echarts.registerMap('平顶山', msg);
    //          var div = $("<div id='show2'></div>");
    //          div.css({
    //              height:"600px",
    //              width:"600px",
    //          })  
    //          $("#show").after(div);
    //          var chart = echarts.init(div[0]);
    //          div.css({
    //              position:"absolute",
    //              top:0,
    //              left:0
    //          })
    //          $("#show").hide();
    //          chart.setOption({
    //     series: [{
    //         type: 'map',
    //         map: '平顶山'
    //     }]
    // });
    //          },
    //          dataType:"json"
    //    })
    //})
})
</script>

</html>